<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">页面设置</h3>
    <el-form
      :model="pageForm"
      class="label-black"
      :show-message="false"
      ref="pageForm"
      label-width="76px">
      <div class="set-part mt20">
        <el-form-item class="label_top" label="页面名称" prop="page_name" required>
          <el-input v-model="pageForm.page_name" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item class="label_top" label="页面描述" prop="page_desc">
          <el-input v-model="pageForm.page_desc" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item class="label_top" label="分享图片" prop="share_image">
          <div class="add-button">
            <el-button plain @click="imageUpload()"><i class="el-icon-plus"></i>上传分享图片(1:1比例)</el-button>
          </div>
          <div v-if="pageForm.share_image" class="img-box">
            <img class="img" :src="pageForm.share_image" />
            <div class="modify-img" @click="imageUpload">更换图片</div>
            <div class="item-delete">
              <i class="el-icon-close" @click="imgSplice"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="背景颜色" prop="pageColorType">
          <el-radio-group class="radio_row_label" v-model="pageForm.pageColorType">
            <el-radio :label="0">默认背景颜色</el-radio>
            <el-radio :label="1">自定义背景颜色</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="pageForm.pageColorType===1" prop="background">
          <div class="flex">
            <span class="like_link mr10" @click="restPageColor()">重置</span>
            <el-color-picker v-model="pageForm.background"></el-color-picker>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>

    <!-- 图片上传 -->
    <en-image-picker
      :show="dialogImageShow"
      @close="dialogImageShow = false"
      @confirm="confirm"
      :limit="1" />
  </div>
</template>

<script>
export default {
  name: 'EnPagePicker',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 默认数据
    defaultData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: this.show,
      pageForm: {
        page_name: undefined,
        page_desc: undefined,
        pageColorType: 0,
        background: '#f5f5f5',
        share_image: undefined
      },
      dialogImageShow: false
    };
  },
  watch: {
    show(newVal) {
      this.visible = newVal;
    },
    defaultData(newVal) {
      if (!newVal || !newVal.page_name) {
        return;
      }
      let _showData = JSON.parse(JSON.stringify(newVal));
      _showData.pageColorType = _showData.background === '#f5f5f5' ? 0 : 1;
      this.pageForm = _showData;
    }
  },
  methods: {
    /**
     * 选择图片
     */
    imageUpload(_index, _item) {
      this.currentIndex = _index;
      this.currentItem = _item;
      this.dialogImageShow = true;
    },
    /**
     * 图片地址清空
     */
    imgSplice() {
      this.pageForm.share_image = '';
    },
    handleConfirm() {
      this.$refs['pageForm'].validate(valid => {
        if (valid) {
          let _data = this.MixinClone(this.pageForm);
          delete _data.pageColorType;
          this.$emit('confirm', _data);
        } else {
          this.$message.error('表单填写有误，请核对！');
          return false;
        }
      });
    },
    confirm(list) {
      console.log(list[0].response.url);
      this.pageForm.share_image = list[0].response.url;
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.add-button {
  padding: 10px 20px;
  margin: 0 -20px;
  .el-button {
    position: relative;
    padding: 0 20px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: solid 1px #3870ea;
    box-sizing: border-box;
    border-radius: 4px;
    color: #3870ea;
    &:hover,
    &:focus {
      background: rgba(56, 112, 234, 0.1);
    }
    i {
      position: absolute;
      top: 1px;
      left: 18px;
      line-height: 38px;
      font-size: 16px;
      font-weight: 700;
    }
  }
}
.img-box {
  position: relative;
  line-height: 0;
  .img {
    width: 100%;
  }
  .modify-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 14px;
  }
  .item-delete {
    position: absolute;
    top: -10px;
    right: -10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
    background: #cacaca;
    color: #fff;
    font-size: 14px;
  }
}
</style>